{% extends "admin/base.html" %}

{% block stylesheets %}
<style>
  .embed-responsive-a {
      padding-top: 141.42%;
  }
</style>
{% endblock %}

{% block content %}
<div class="jumbotron">
  <div class="container">
    <h1>Writeups</h1>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-2 offset-md-1">
      <div class="nav flex-column nav-pills" role="tablist">
        {% for week in weeks %}
        {% set active = "active" if loop.first  else "" %}
	<a class="nav-link {{ active }}" id="writeups-week{{ loop.index }}-tab" data-toggle="pill" href="#writeups-week{{ loop.index }}" role="tab">Writeup #{{ loop.index }}</a>
        {% endfor %}
      </div>
    </div>
    <div class="col-md-8">
      <div class="tab-content" id="v-pills-tabContent">
        {% for week, users in weeks.items() %}
        {% set week_index = loop.index %}
        {% set active = "show active" if loop.first  else "" %}
	<div class="tab-pane fade {{ active }}" id="writeups-week{{ week_index }}" role="tabpanel">
          <h2>Writeup #{{ loop.index }}</h2>
          <br>
          <div class="accordion" id="writeups-week{{ week_index }}-accordion">
            {% for user, (writeup, comment) in users.items() %}
            {% set content = comment.content if comment else "" %}
            <div class="card">
              <div class="card-header" id="writeupsHeading-week{{ week_index }}-user{{ user.id }}">
                <h2 class="mb-0">
                  <button class="btn btn-link text-decoration-none collapsed w-100" type="button" data-toggle="collapse" data-target="#writeups-week{{ week_index }}-user{{ user.id }}" aria-expanded="false" aria-controls="writeups-week{{ week_index }}-user{{ user.id }}">
                    <h4 class="text-left">{{ user.name | truncate(50) }}</h4>
                  </button>
                </h2>
              </div>
              <div id="writeups-week{{ week_index }}-user{{ user.id }}" class="collapse" aria-labelledby="writeupsHeading-week{{ week_index }}-user{{ user.id }}" data-parent="#writeups-week{{ week_index }}-accordion">
                <div class="card-body">
                  {% if comment %}
                  <h3>{{ "Accepted" if comment.accepted else "Rejected" }}</h3>
                  {% endif %}
                  <div class="embed-responsive embed-responsive-a">
                    <embed {{ "data-src" if week_index != 1 else "src" }}="/writeups/{{ writeup.id }}"></embed>
                  </div>
                  <form method="post">
                    <input name="nonce" type="hidden" value="{{ Session.nonce }}">
                    <input name="writeup_id" type="hidden" value="{{ writeup.id }}">
                    <textarea name="comment" class="form-control" rows="2" placeholder="Add comment">{{ content }}</textarea>
                    <div class="row col-md-12">
                      <div class="col-md-6">
                        <input name="accepted" type="submit" value="Accept" class="w-100">
                      </div>
                      <div class="col-md-6">
                        <input name="accepted" type="submit" value="Reject" class="w-100">
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script defer src="{{ url_for('views.themes', path='js/dojo/writeups.js') }}"></script>
{% endblock %}
